<template>
  <div class="app-container">
    <List v-show="!open" ref="list"
          @add-handle="addHandle"
          @update-handle="updateHandle"
          @detail-handle="detailHandle"
          @import-handle="importHandle"
    ></List>
    <div v-if="open">
      <Add v-if="type === ADD" @cancel="cancelHandle" @reload="reloadHandle"  ></Add>
      <Edit v-if="type === UPDATE" @cancel="cancelHandle" @reload="reloadHandle" :id="id"></Edit>
      <Detail v-if="type === DETAIL" @cancel="cancelHandle" :id="id"  ></Detail>
      <Import v-if="type === IMPORT" @cancel="cancelHandle" @reload="reloadHandle"></Import>
    </div>
    <!-- 添加或修改行政区划对话框 -->
<!--    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false"-->
<!--               :title="title"-->
<!--               :visible.sync="open"-->
<!--               width="500px"-->
<!--               append-to-body-->
<!--               destroy-on-close-->
<!--    >-->


<!--    </el-dialog>-->
  </div>
</template>

<script>
import List from "./list.vue"
import Add from "./add.vue"
import Edit from "./edit.vue"
import Detail from "./detail.vue"
import Import from "./import.vue";

import IndexMixin from "@/minixs/index"
export default {
  name: "Product",
  mixins: [IndexMixin],
  data(){
    return {
      title:"企业基地",
      IMPORT:"IMPORT"
    }
  },
  components: {
    List,
    Add,
    Edit,
    Detail,
    Import
  },
  methods:{
    importHandle(message){
      this.open = message.open
      this.title = message.title
      this.type = message.type
    }
  }
};
</script>
